<!--
  在线编辑器组件
  wdz
  2019年12月23日
-->

<template lang="pug">
  div.tinymce-editor()
    editor(v-model="tinymceHtml" :init="init")
</template>

<script>
  import Editor from '@tinymce/tinymce-vue'
  import tinymce from 'tinymce/tinymce'
  import 'tinymce/themes/silver/theme'

  export default {
    name: 'TinyEditer',
    components: {Editor},
    data() {
      return {
        tinymceHtml: '',
        init: {
          language_url: '/static/tinymce/zh_CN.js', // 汉化文件
          language: 'zh_CN', // 中文显示
          skin_url: '/static/tinymce/skins/ui/oxide', // 皮肤文件
          height: 300,
          toolbar: // 编辑器主要功能
            'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
          branding: false
        }
      }
    },
    mounted() {
      // 初始化
      tinymce.init({})
    },
    created() {
      this.$watch('tinymceHtml', newHtml => {
        this.$emit('query', newHtml)
      })
    }
  }
</script>

<style scoped>

</style>
